<div *ngIf="countVersions() !== 0" wslDropdown>
  <div
    class="wsl-dropdown-toggle"
    id="version-dropdown-{{ side }}"
    aria-haspopup="true"
    aria-expanded="false">
    <div class="flex items-center">
      <span class="font-semibold">{{ currentVersion }}</span>
      <ng-icon class="opacity-50" name="featherChevronDown" />
    </div>
  </div>
  <div class="wsl-dropdown-menu hidden w-48">
    <span class="wsl-text-muted px-2">Choose a {{ side }} version</span>
    <hr class="my-2 border dark:border-gray-700" />
    <form class="px-2" id="wsl-version-search-{{ side }}">
      <input
        class="wsl-input-field"
        type="search"
        id="versionFilter-{{ side }}"
        name="versionFilter"
        placeholder="Find a version..."
        autocomplete="off"
        maxlength="16"
        (keyup)="onKeyupVersionFilter($event)" />
    </form>
    <hr class="my-2 border dark:border-gray-700" />
    <div
      class="wsl-dropdown-item"
      *ngFor="let version of relevantVersions"
      (click)="updateVersion(version.slug)">
      {{ version.name }}
      <ng-container *ngFor="let tag of version.tags">
        <span>({{ tag }})</span>
      </ng-container>
    </div>
    <span *ngIf="countVersionsNotShown()">
      <hr class="my-2" />
      <div class="wsl-text-muted px-2">
        <span>{{ countVersionsNotShown() }} versions not shown.</span>
      </div>
    </span>
  </div>
</div>
